<template>
    <div>
      <!--模糊查询------------------------------------->
      <div slot="header" class="clearfix">
        <el-form :inline="true" :model="query">
          <el-form-item>
            <el-input v-model="query.empName" placeholder="巡检员姓名" :clearable="true">
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="query.pumpStationName" placeholder="泵站名称" :clearable="true">
            </el-input>
            <el-form-item>
              <el-date-picker v-model="query.dateRange" type="daterange" range-separator="至" start-placeholder="开始查找日期"
                end-placeholder="截止日期" value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-form-item>
          <el-form-item>
          <el-row>
            <el-col :span="20">
              <el-button type="primary" @click="loadPollingLog"><i class="el-icon-search"></i></el-button>
              <el-button type="success" @click="addFormIsNull">新建</el-button>
              <el-button type="success" @click="exportExcel">导出数据</el-button>
              <el-upload
                     class="clearfix"
                     action="http://localhost:9000/polling/importExcel"
                     name="file"
                     :on-progress="onExcelProgress"
                     :on-success="handleExcelSuccess"                   
                     accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                     multiple
                     :limit="1"
                  >
                  <el-button  type="primary">数据导入</el-button>
                 </el-upload>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      </div>
      <!--模糊查询-------------------------------------->
      <!--展示所有巡检日志------------------------------->
      <el-table :data="PollingtList" stripe style="width: 100%">
        <el-table-column prop="pollingLogId" label="编号" width="180">
        </el-table-column>
        <el-table-column prop="empName" label="巡检员工" width="180">
        </el-table-column>
        <el-table-column prop="pumpStationName" label="泵站名称" width="180">
        </el-table-column>
  
        <el-table-column prop="pollingLogDesc" label="巡检情况" @click="lookDesc" width="180">
  
        </el-table-column>
  
        <el-table-column prop="pollingLogTime" label="巡检日期" width="180">
        </el-table-column>
        <el-table-column prop="stateName" label="日志状态" width="180">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
                  <el-button size="mini"
                  slot="reference"
                  type="danger"
                  :disabled="scope.row.stateName=='巡检日志未读'?false:true"
                   @click="handleEdit(scope.row.pollingLogId)"
                      >已读</el-button
                  >
                  <el-popconfirm title="确认调整为过期吗？" @confirm="handleDelete(scope.row.pollingLogId)">
                      <el-button
                      slot="reference"
                      size="mini"
                      type="danger"           
                      >隐藏</el-button>
                  </el-popconfirm>
                 </template>
      </el-table-column>
      </el-table>
  
      <!--展示所有巡检日志------------------------------------------->
      <!--分页------------------------------------------------------->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.query.currentPage"
        :page-sizes="this.pageInfo.pageSizes"
        :page-size="this.query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.pageInfo.total">
      </el-pagination>
      <!--分页-------------------------------------------------------->
      <!--新建巡检日志模态框------------------------------------------->
      <el-dialog title="新增日志" :visible.sync="dialog.addDialogFormVisible" width="30%" >
        <el-form :model="addForm"  :ref="addForm">
        <el-row>
            <el-col :span="12">
              <el-form-item label="巡检人员" prop="empId">
                <el-select v-model="addForm.empId" placeholder="请选择巡检人员">
                  <el-option 
                  v-for="(emp, index) in empList"
                    :key="index"
                    :label="emp.empName"
                    :value="emp.empId"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="泵站名称" prop="pumpStationId">
                <el-select v-model="addForm.pumpStationId" placeholder="请选择工作泵站">
                  <el-option 
                  v-for="(pumpStation, index) in pumpList"
                    :key="index"
                    :label="pumpStation.pumpStationName"
                    :value="pumpStation.pumpStationId"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="工作描述" prop="pollingLogDesc">
                <el-input v-model="addForm.pollingLogDesc" autocomplete="off"></el-input>
                </el-form-item>
              <el-form-item label="巡检日期" prop="pollingLogTime">
                <el-date-picker v-model="addForm.pollingLogTime" type="date" placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>  
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.addDialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click= "addPollingLog">确 定</el-button>
        </span>
      </el-dialog>
      <!--新建巡检日志模态框------------------------------------------->
      <!--查看日志模态框----------------------------------------------->
      <el-dialog title="巡检信息" :visible.sync="dialog.lookDialogFormVisible" width="30%" >
        <span>巡检日志</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.lookDialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="changePollingLogState(scope.row.id)">确 定</el-button>
        </span>
      </el-dialog>
      <!--查看日志模态框----------------------------------------------->
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        disabled:false,
        upload:{},
        empList:[],
        PollingtList:[],
        user:{},
        pumpList:[],
        pageInfo: {
          total: 0,
          pageSizes: [5, 10, 15, 20, 25],
        },
        query:{
          pumpStationName:"",
          empName:"",
          pageSize: 5,
          currentPage: 1,
          dateRange:[],
         
        },
        addForm:{
          pumpStationId:"",
          pollingLogTime:"",
          pollingLogDesc:""
  
        },
        dialog:{
          addDialogFormVisible:false,
          lookDialogFormVisible:false
  
        }
      };
     
    },
    methods: {
      //数据上传
      handleExcelSuccess(res,result) {
                  this.$message.success("导入成功");
                  if (result.response.success) {
                      this.loadPollingLog();
                  }
              },
              // 上传中
              onExcelProgress(){
  
              },
      exportExcel() {      
        this.$axios
          .post("polling/exportExcel", this.query,{responseType: 'blob'})
          .then((res) => {
            let fileName = res.headers["content-disposition"].split("=")[1];//得到后端生成的文件名          
            let url = window.URL.createObjectURL(new Blob([res.data]));
            let dom = document.createElement("a");
            dom.style.display = "none";
            dom.href = url;
            dom.setAttribute("download", fileName); //指定下载后的文件名，防跳转
            document.body.appendChild(dom);
            dom.click();
            // 释放内存
            dom.parentNode.removeChild(dom)
            window.URL.revokeObjectURL(dom.href);
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      addFormIsNull(){
        this.addForm={};
        this.dialog.addDialogFormVisible=true;
      },
      loadEmp(){
        this.$axios.get("empList").then(res=>{
            this.empList = res.data.data.empList;
          });
  
      },
      handleDelete(pollingLogId){
      
        this.$axios.delete("polling/"+pollingLogId).then((res) => {
          if (res.data.code == 200) {
            this.$message.success("修改成功");
            this.loadPollingLog();
          } else {
            this.$message.error(res.data.message);
          }
        });
      },
      handleSizeChange(val) {
        this.query.pageSize = val;
        this.loadPollingLog();
      },
      handleCurrentChange(val) {
        this.query.currentPage = val;
        this.loadPollingLog();
      },
  
      lookDesc(){
          this.dialog.lookDialogFormVisible=true;
      },
      changePollingLogState(id){
        this.dialog.lookDialogFormVisible=false;
        this.$axios.get("polling/" + id).then(res=>{
        this.stateName = res.data.data.stateName;
        });
  
      },
      handleEdit(pollingLogId){
       
        this.$axios.put("polling/"+pollingLogId).then((res) => {
          if (res.data.code == 200) {
            this.$message.success("修改状态成功");
            this.disabled=true;
            this.loadPollingLog();
          } else {
            this.$message.error(res.data.message);
          }
          
        });
      },
      loadPumpStation(){
          this.$axios.get("pumpStation").then(res=>{
            this.pumpList = res.data.data.pumpList;
          });
      },
      loadPollingLog(){
        this.user=sessionStorage.getItem("user");
        this.$axios.post("polling", this.query).then((res) => {
          this.PollingtList = res.data.data.PollingtList;
          
          this.pageInfo.total = res.data.data.total;
      });
     
    },
    addPollingLog(){
    
        this.$axios.post("polling/addPolling",this.addForm).then((res)=>{
          if(res.data.code==200){
            this.$message.success("添加成功");
            this.dialog.addDialogFormVisible = false;
            this.loadPollingLog();
          }
          else{
            this.$message.error("添加失败");;
          }
        })
      },
    
  },
    mounted() {
      this.loadEmp();
      this.loadPollingLog();
      this.loadPumpStation();
      
    },
  };
  </script>
  <style >
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  </style>
  